(function(){
	let oBtnF = document.querySelector("#wrap .btn-find"),
		oBtnR = document.querySelector("#wrap .btn-replace"),
		oBRst = document.querySelector("#wrap .reset"),
		oFind = document.querySelector("#wrap .find"),
		oRepl = document.querySelector("#wrap .replace"),
		oCont = document.querySelector("#wrap .content"),
		StrFd,
		StrCg,
		change = oCont.innerHTML,
		a,
		b;
	//点击查找按钮	
	oBtnF.onclick = function(){
		 a = oFind.value;
		StrFd = `<span style="color:red">${a}</span>`;//style里不要加分号
		oCont.innerHTML = oCont.innerHTML.split(a).join(StrFd);
	}
	//点击替换按钮
	oBtnR.onclick = function(){
		 b = oRepl.value;
		if(!b)
		oCont.innerHTML = oCont.innerHTML.split(StrFd).join("");//删除功能
		else{ 
			StrCg = `<span style="color:red">${b}</span>`
			change = oCont.innerHTML.split(StrFd).join(b) 
			oCont.innerHTML = oCont.innerHTML.split(StrFd).join(StrCg);
		}
		oFind.value = "";//清空查询框	
	}
	//点击重置按钮
	oBRst.onclick = function(){
		if(!StrFd)return;
		oCont.innerHTML = change;
		console.log(1)
	}
})()